<template>
  <Section class="bg-base-300">
    <SectionTitle class="pt-10" title="我们的作者">
      我们的精选作者，是活跃于大学校园中热爱IT技术和编程的人。在这里您可以了解这些才华横溢的作者以及其独特观点！
    </SectionTitle>
    <div class="my-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <div
        class="relative"
        v-for="author in data?.query.results"
        :key="author.id"
      >
        <div class="rounded-lg border bg-base-100 p-6">
          <div
            class="flex flex-col items-center gap-3 text-center sm:flex-row sm:text-left"
          >
            <div class="h-14 w-14">
              <img
                :src="author.avatar ?? `/api/avatar/${author.nickname}.svg`"
                :alt="author.nickname"
                class="h-full w-full rounded-full object-cover object-center"
              />
            </div>
            <div class="relative">
              <h3 class="font-sans text-lg font-medium leading-none">
                <RouterLink
                  class="hover:text"
                  :to="{ name: 'author-details', params: { id: author.id } }"
                >
                  {{ author.nickname }}
                </RouterLink>
              </h3>
              <p class="font-sans text-sm">{{ author.job }}</p>
            </div>
            <div class="sm:ml-auto">
              <RouterLink
                :to="{ name: 'author-details', params: { id: author.id } }"
                class="inline-flex h-10 w-52 items-center justify-center rounded-lg border bg-base-100 px-4 font-sans text-sm font-medium transition-colors duration-300 hover:border-primary/50 hover:text-primary sm:w-auto"
              >
                详情
              </RouterLink>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex items-center justify-between px-4">
      <ZPagination
        :total="total"
        v-model:page="page"
        v-model:page-size="pageSize"
        :buttons="['first', 'last']"
      />
    </div>
  </Section>
</template>
<script setup lang="ts">
import type { User, Resume } from "@/stores/types";
import { usePageFetch } from "@/composables/usePageFetch";

const { data, execute, total, page, pageSize } = usePageFetch<User & Resume>(
  "/authors",
  { pageSize: 12 },
);

onActivated(() => {
  execute();
});
</script>
